<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- import CSS -->
  <link rel="stylesheet" href="../js/3rd/elementUi/index.css">
  <link rel="stylesheet" href="../css/pc.css">
  <script src="../js/3rd/elementUi/vue.js"></script>
  <script src="../js/3rd/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div id="projectLists" class="project-lists" style="display:none">
    
	<el-container>
	  <el-aside class="sider-bar" id="siderbar">
      <div class="logo"><img src="../image/logo.jpg">来赚吧管理后台</div> 
	    <tp-siderbar title="发布项目"></tp-siderbar>
	  </el-aside>
    <el-main>
	  <div class="right-content">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="bread-bd">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>项目列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="tb-bd">
        <div class="title">
          <ul> 
            <li>项目名称</li>
            <li >项目利润(积分)</li>
            <li class="long">项目分成</li>
            <li class="long">操作</li>
            <div class="clearfix"></div>
          </ul>
        </div>
        <div class="content" v-for="project in projects">
          <ul>
            <li>{{project.name}}
				<el-tag size="mini" >{{project.joinJzz|statusText}}</el-tag><div></div>
			</li>
            <li ></li>
            <li class="long"></li>
            <li class="long">
              <div class="show-preject-item" @click="getProjectItem(project.id)">查看业务</div>             
              <div class="add-item" @click="showAddItem(project.id)">添加业务</div>
			  <div class="add-item" @click="showBeGoldProject(project.id)">成为金种子</div>
              <a class="add-item" :href="getDelProjectUrl(project.id)">编辑项目</a>
            </li>
            <div class="clearfix"></div>
          </ul>
		  <el-dialog
		    title="请确认"
		    :visible.sync="dialogVisible"
		    width="30%"
		    :before-close="handleClose">
		    <span>确定该项目成为金种子项目?</span>
		    <span slot="footer" class="dialog-footer">
		      <el-button @click="dialogVisible = false">取 消</el-button>
		      <el-button type="primary" @click="becomeGoldProject()">确 定</el-button>
		    </span>
		  </el-dialog>
          <el-dialog title="添加业务" :visible.sync="dialogFormVisible">
            <el-form >
              <el-form-item label="业务名称" :label-width="formLabelWidth">
                <el-input v-model="newProjectItemName" auto-complete="off"></el-input>               
              </el-form-item>
              <el-form-item label="业务链接" :label-width="formLabelWidth">
                <el-input v-model="newProjectItemLink" auto-complete="off"></el-input>             
              </el-form-item>
              <el-form-item label="业务利润" :label-width="formLabelWidth">
                <el-input v-model="newProjectItemScore" auto-complete="off"></el-input>             
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="sumbitAddProjectItem()">确 定</el-button>
            </div>
          </el-dialog>
          <div class="item" v-show="project.id==selectProjectId" v-for="item in itemList"> 
            <ul> 
              <li>{{item.businessName}}</li>
              <li>{{item.score}}</li>
              <li class="long"></li>
              <li class="long"><div class="delete-project-item" @click="deleteProjectItem(item)">删除</div>
                <a class="check-custom" :href="getProjectItemUrl(item.id)">查看用户</a>
              </li>
              <div class="clearfix"></div>
            </ul>
          </div>
          
        </div>
      </div>

      <div class="clearfix"></div>
    </div>  
   </el-main>  
	</el-container>



  </div>
</body>


  <!-- import JavaScript -->
  <script src="../js/3rd/elementUi/index.js"></script>
  <script src="../js/js/admin_siderbar.js"></script>
  <script src="../js/js/common.js"></script>
  <script>
   var token=getCookie("userToken");
   var userId=getCookie("userId");
   console.log(token)
   console.log(userId)
   if(!token||!userId){
      window.location.href = "/admin/login.html";
   }


    new Vue({
      el: '#projectLists',
      data: {
        projects:[],
        itemList:'',
        isGettingItems:false,
        selectProjectId:'',
        selectAddProjectId:'',
		selectBeGoldProjectId:'',
        isDoingDeleteItems:false,
        isDoingAddNewItems:false,
        dialogFormVisible:false,
		dialogVisible:false,
        newProjectItemName:'',
        newProjectItemLink:'',
        newProjectItemScore:'',
        formLabelWidth: '120px',
		isDoing:false

      },
	  filters: {
		  statusText: function (key) {
			  key = parseInt(key);
			  var map = {
				  0: "普通",
				  1: "金种子",				 
			  };
			  return map[key]
		  },
	  },					  
      created:function(){
         var getProjectUrl="/project/getAllProjects";
         getData(getProjectUrl,function(res){
             console.log(res)
             this.projects=res.data.projects;
         }.bind(this));
         $("#projectLists").show()

      },
      methods:{
         getProjectItem:function(id){
          if(this.isGettingItems){
            return;
          }
          var url="/project/getProjectItems";
          console.log(id)
          var data={id:id};
          console.log(data);
          this.isGettingItems=true;
          pushData(url,data,function(res){
            this.isGettingItems=false;
            if(res.errorCode=="008"){
               window.location.href = "/admin/login.html";
             }
            if(res.state){
              this.itemList=res.data.projectItems;
              this.selectProjectId=id;
            }else{
              alert(res.message)
            }
          }.bind(this));
         },
		 handleClose(done) {
			 this.$confirm('确认关闭？')
			   .then(_ => {
				 done();
			   })
			   .catch(_ => {});
		 },
         sumbitAddProjectItem:function(){
            this.dialogFormVisible=true;
            if(this.isDoingAddNewItems){
              return;
            }
            if(!this.isNumber(this.newProjectItemScore)||!this.newProjectItemScore){
              alert("请输入数字,利润为必填");
              return;
            }
            this.isDoingAddNewItems=true;
            var url="/project/addProjectItem";
            console.log(this.newProjectItemName)
            var data={
                        businessName: this.newProjectItemName,
                        link: this.newProjectItemLink,
                        projectFk: parseInt(this.selectAddProjectId),
                        score: parseInt(this.newProjectItemScore),
                        token: token,
                        userId: parseInt(userId),
                        client: 3,
                     }
                     console.log(data)
            pushData(url,data,function(res){
              this.isDoingAddNewItems=false;
              console.log(res)
              if(res.state){
                  this.dialogFormVisible=false;                
                  if(this.itemList){
                     this.itemList.push(data);
                  }
                  this.newProjectItemName="";
                  this.newProjectItemLink="";
                  this.newProjectItemScore="";
                  alert("添加业务成功")
              }else{
                alert(res.message);
              }
            }.bind(this))
         },
         showAddItem:function(id){
          this.selectAddProjectId=id;
          this.dialogFormVisible=true;
         },
		 showBeGoldProject:function(id){
		  this.selectBeGoldProjectId=id;
		  this.dialogVisible=true;
		 },
		 becomeGoldProject:function(){
			 if(this.isDoing){
				 return
			 }
			 this.isDoing=true;
			 var url="/project/joinJzz"
			 var data={
				id: this.selectBeGoldProjectId,
				token: token,
				userId: parseInt(userId),
				client: 3,
			}
			pushData(url,data,function(res){
				this.isDoing=false;
				if(res.errorCode=="008"){
				   window.location.href = "/admin/login.html";
				 }
				if(res.state){
					this.dialogVisible=false;
					this.$message({
					  message: '成功成为金种子项目',
					  type: 'success'
					});
				}else{
					this.$message({
					  message: res.message,
					  type: 'warning'
					});
				}
			}.bind(this))	
		 },
         deleteProjectItem:function(item){
              if(this.isDoingDeleteItems){
                return;
              }
              this.isDoingDeleteItems=true;

              var url="/project/deleteProjectItem ";
              var data={id:item.id,
                        token: token,
                        userId: parseInt(userId),
                        client: 3,
              };
              console.log(data)
              pushData(url,data,function(res){
                this.isDoingDeleteItems=false;
                if(res.state){
        
                removeArrObj(this.itemList,item);
                console.log(res);
                  alert("删除成功")
                }else{
                  alert(res.message)
                }
              }.bind(this))
          },
          getProjectItemUrl:function(id){
             return "projectUsers.html"+"#"+id;
          },
          getDelProjectUrl:function(id){
            return "editProduct.html"+"#"+id;
          },
          isNumber:function(val){

              var regPos = /^\d+(\.\d+)?$/; //非负浮点数
              var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
              if(regPos.test(val) || regNeg.test(val)){
                  return true;
              }else{
                  return false;
              }
          },

          
        }

      
    })
  </script>
</html>